<template>
  <el-main>
    <el-alert
      title="感谢Vue3.0版本的vue.draggable.next拖拽组件 https://github.com/SortableJS/vue.draggable.next"
      type="success"
      style="margin-bottom: 20px"
    />
    <div class="dragList">
      <draggable
        v-model="listA"
        animation="200"
        item-key="id"
        group="people"
      >
        <template #item="{ element }">
          <div class="item">
            {{ element.text }}
          </div>
        </template>
      </draggable>
    </div>
    <div class="dragList">
      <draggable
        v-model="listB"
        animation="200"
        item-key="id"
        group="people"
      >
        <template #item="{ element }">
          <div class="item">
            {{ element.text }}
          </div>
        </template>
      </draggable>
    </div>
  </el-main>
</template>

<script>
import draggable from "vuedraggable";
export default {
  name: "Drag",
  components: {
    draggable,
  },
  data() {
    return {
      listA: [
        {
          id: 1,
          text: "A1",
        },
        {
          id: 2,
          text: "A2",
        },
        {
          id: 3,
          text: "A3",
        },
        {
          id: 4,
          text: "A4",
        },
        {
          id: 5,
          text: "A5",
        },
        {
          id: 6,
          text: "A6",
        },
        {
          id: 7,
          text: "A7",
        },
        {
          id: 8,
          text: "A8",
        },
        {
          id: 9,
          text: "A9",
        },
      ],
      listB: [
        {
          id: 1,
          text: "B1",
        },
        {
          id: 2,
          text: "B2",
        },
        {
          id: 3,
          text: "B3",
        },
        {
          id: 4,
          text: "B4",
        },
        {
          id: 5,
          text: "B5",
        },
        {
          id: 6,
          text: "B6",
        },
        {
          id: 7,
          text: "B7",
        },
        {
          id: 8,
          text: "B8",
        },
        {
          id: 9,
          text: "B9",
        },
      ],
    };
  },
};
</script>

<style scoped>
.dragList {
  overflow: auto;
}
.item {
  cursor: move;
  float: left;
  background: #fff;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  margin: 0 15px 15px 0;
  border: 1px solid #e6e6e6;
}
.dragList .sortable-ghost {
  opacity: 0.5;
}
</style>
